<template>
	<view class="coupon_box">
		<view class="wenyue-font" style="text-align: center;padding-top: 20upx;font-size: 40upx;">可用的优惠券</view>
		<coupon v-for="(item, index) in coupon" :key="index" v-bind:item="item" theme="#ff5500"></coupon>
	</view>
</template>

<script>
	import cloudApi from '@/common/cloudApi.js'
	import coupon from '../../components/coolc-coupon/coolc-coupon.vue';
	import {
		mapState
	} from 'vuex'
	export default {
		components: {
			coupon
		},
		data() {
			return {
				coupon: []
			}
		},
		async onLoad() {
			await this.showCoupon();
		},
		methods: {
			showCoupon() {
				this.coupon = this.userInfo.coupon[0].list;
			}
		},
		computed: {
			...mapState(['isLogin', 'userInfo'])
		},
	}
</script>

<style>
	.coupon_box {
		width: 100%;
		height: auto;
		display: table;
		padding: 6upx 26upx 26upx 26upx;
	}

	.other_type {
		width: 100%;
		height: 90upx;
		padding-top: 50upx;
	}

	.text {
		width: 100%;
		border-top: 1px solid #eeeeee;
		display: block;
		text-align: center;
		position: relative;
	}

	.textspan {
		width: 180upx;
		height: 40upx;
		line-height: 40upx;
		color: #999999;
		display: block;
		background: #ffffff;
		position: absolute;
		left: 50%;
		top: 50%;
		margin-left: -90upx;
		margin-top: -20upx;
	}
</style>